import React from 'react';
import {Form, Input, Card, Button} from 'antd';
import ArticleCategory from 'components/common/ArticleCategory';
import {model} from 'utils/model';
import {nextTick} from 'utils/nextTick';
import _ from 'lodash';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';


const {TextArea} = Input;

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    span: 4
  },
  wrapperCol: {
    span: 10
  }
};
const editorLayout = {
  labelCol: {
    span: 4
  },
  wrapperCol: {
    span: 20
  }
};
const btnItemLayout = {
  wrapperCol: {
    offset: 4,
    span: 10
  }
};

@model('articleCreate')
class ArticleCreate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: null
    };
  }

  static getDerivedStateFromProps(props) {
    if (props.record && props.record.content) {
      return {
        editorState: BraftEditor.createEditorState(props.record.content)
      };
    } else {
      return {
        editorState: null
      };
    }
  }

  handleEditorChange = (editorState) =>{
    this.setState({
      editorState
    });
  }

  onOk() {
    const {form, add, edit, id} = this.props;
    form.validateFields((err, values) => {
      values.content = values.content.toHTML();
      if (!err) {
        if (id) {
          edit(values);
        } else {
          add(values);
        }
      }
    });
  }


  render() {
    const { record = {}, form, loading, id } = this.props;
    const { editorState } = this.state;
    const {getFieldDecorator} = form;
    const articleProps = {
      isShow: false,
      val: _.isNil(record.category_id) ? '' : record.category_id
    };
    // console.log(editorState, id);
    return (
      <div>
        <Card
          title="新增文章"
          style={{width: '100%'}}
          loading={loading.detail}
        >
          <FormItem
            {...formItemLayout}
            label="标题"
          >
            {getFieldDecorator('title', {
              initialValue: record.title || '',
              rules: [{required: true, message: '请填写标题'}]
            })(
              <Input placeholder="标题" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="作者"
          >
            {getFieldDecorator('author', {
              initialValue: record.author || '',
              rules: [{required: true, message: '请填写作者'}]
            })(
              <Input placeholder="作者" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="分类"
          >
            {getFieldDecorator('category_id', {
              initialValue: record.category_id || '',
              rules: [{required: true, message: '请选择分类'}]
            })(
              <ArticleCategory {...articleProps} />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="关键字"
          >
            {getFieldDecorator('keywords', {
              initialValue: record.keywords || '',
              rules: [{required: true, message: '请填写关键字'}]
            })(
              <TextArea placeholder="关键字" />
            )}
          </FormItem>
          {
            ((id && editorState) || id === '') &&
            <FormItem
              {...editorLayout}
              label="内容"
                >
              {getFieldDecorator('content', {
                    initialValue: editorState || '',
                    rules: [{required: true, message: '请填写内容'}]
                  })(
                    <BraftEditor
                      onChange={this.handleEditorChange}
                      />
                  )}
            </FormItem>
          }
          <FormItem
            {...btnItemLayout}
          >
            <Button
              type="primary"
              loading={loading.create}
              onClick={() => nextTick(() => this.onOk())}
            >提交</Button>
          </FormItem>
        </Card>
      </div>
    );
  }
}

export default Form.create()(ArticleCreate);
